import React from 'react'
import {Redirect, Route, Switch} from "react-router-dom"
import {withRouter} from   "react-router-dom"   
@withRouter                                       
 class CompileRoute extends React.Component {
    constructor(){
        super()
        this.state={
            c:null
        }
    }
    renderContent(){
       
    }
    static getDerivedStateFromProps(nextProps){
       
        let c=[];//最后处理完之后生成的route组件
      
        let {routes,isChildRoute}=nextProps   //路由配置选项
        let {pathname}=nextProps.location  //当前浏览器访问的路径
        // console.log(pathname);
        //1.用当前浏览器访问的路径（pathname)从路由配置选项的path中查找，如果能查找到，说明路由合法，如果查找不到说明不合法应该返回404
        let target=routes.find(route=>route.path===pathname)
       
        //2.通过查找localstorage中有没有token来判断用户是否登录
        let isLogin=localStorage.getItem("qf-token-2010")
        // console.log(isLogin);
        // console.log(target);
        //判断
        //在为登入的清空下，生成这种数据
         {/* <Switch>
                <Route path="/login" component=""/>  
                <Route path="/4040 component={page404}"/>>
                <Redirect to="/404"/ > 
             </Switch> */}
             if(!isLogin){
                 //可以返回不需要校验的页面
                 c=routes.filter(route=>!route.auth)
                //  console.log(c);
                 c=c.map(route=><Route key={route.path} 
                 path={route.path} exact={route.exact}
                  component={route.component}/>)
                  c.push(<Redirect key="redirect1" to="/login"/>)
             }else{
                 //登入状态下可以访问所有的页面
                c=routes.map(route=><Route key={route.path} 
                    path={route.path} exact={route.exact}
                     component={()=> <route.component routes={route.children}/>}/>)
                    if(!isChildRoute){//如果不是嵌套路由 ，那么就加上重定向
                        c.push(<Redirect key="redirect2" to="/404"/>)
                    }
             }
            //  console.log(c);
             return {c}
       
        // if(isLogin){ //2.如果用户已经登入
        //     //判断用户访问的路径是否合法
        //     if(target){
        //     c=<Route path={target.path} component={target.component}/>       
        //     }else{
        //         //登入状态下访问了不合法的路径 返回404
        //         let Page404=routes.find(route=>route.path==="404")
        //         c=<Route component={Page404.component}/>
        //     }
        // }else{
        //     //3.未登入状态
        //     //用户访问的路由合法但是需要校验，让页面跳转到登入页
        //     if(target && target.auth){
        //         c=<Redirect to="/login"/>
        //     }else{
        //          //判断
        //          //1.用户访问的页面合法 不需要校验的路由 并且没有登入
        //          if(target && !target.auth && !isLogin){
        //              c=<Route path={target.path} component={target.component}/>
        //         }else{
        //              //用户访问的页面不合法 让页面变成404
        //             let Page404=routes.find(route=>route.path==="404")
        //              c=<Route component={Page404.component}/>
        //         }
               
        //     }
           

        // }
        // return {c}
    }
    // componentDidMount(){
    //     console.log(this.renderContent());
    // }
    render() {
        return <Switch>{this.state.c}</Switch> 
    }
}
export default  CompileRoute 